<!DOCTYPE html>
<html lang="zh">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">



	<title>百度地图</title>

	<style type="text/css">
		html {
			height: 100%
		}

		body {
			height: 100%;
			margin: 0px;
			padding: 0px
		}

		#mapPage {
			height: 100%;
		}

		#container {
			height: 100%
		}


		.neibu_box {
			height: 60px;
			background-color: #fff;
			border-radius: 1%;
			top: 0%;

			z-index: 5;
			position: absolute;
			padding-top: 10px;
			padding-bottom: 10px;
		}

		.neibuimg {
			width: 10%;
			height: 20%;
		}

		.neibu_flx {
			display: flex;
			padding: 3% 5%;
			font-size: 14px;
			align-items: center;
			width: 100%;
			margin-top: 18px;
		}

		.neibu_box_input {
			border: none;
			margin-left: 2%;
			width: 70%;
			height: 20px;
			background-color: #F7F8FA;
			padding: 5px;
			border-radius: 16px;
			padding-left: 10px;

		}

		.neibu_box_input:focus {
			outline: none;
			border: none;
		}

		.tangram-suggestion-main {
			position: absolute;
			z-index: 99999999999999;
		}

		.neibuicolse {
			width: 5%;
			height: 10%;
		}

		.btn {
			width: 90%;
			height: 45px;
			background-color: #02A7F0;
			text-align: center;
			line-height: 45px;
			color: #fff;
			border-radius: 5px;
			margin-left: 5%;
			margin-top: 5%;
		}

		.preference_item_box_zhuang {
			background-color: #019FE8;
			width: 28px;
			height: 28px;
			border-radius: 100%;
			color: #fff;
			text-align: center;
			line-height: 28px;
			font-size: 12px;
		}

		.AddressSearch {
			position: fixed;
			top: 18px;
			left: 38px;
			z-index: 1000;
			width: 400px;
			height: 30px;
			display: flex;
			box-shadow: 0px 0px 2px 1px #211e1e;



		}

		.searchInput {
			outline: none;
			flex: 1;
		}

		.searchBtn {
			width: 44.5px;
			height: 30px;
			background-color: #3699ff;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			transition: 0.2s;
		}

		.searchBtn:hover {
			opacity: 0.8;
		}

		.searchPic {
			width: 15px;
			height: 15px;
		}
	</style>
</head>

<body>
	<div>

	</div>
	<div id='mapPage'>
		<div id='container'></div>
		<div class="neibu_box">
			<div class="AddressSearch">
				<input type="text" class="searchInput" id="input" placeholder="输入地址" />

				<div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;
						 height:auto; display:none;">
				</div>
			</div>

		</div>
	</div>


</body>
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
</script>
<script type="text/javascript"
	src="https://api.map.baidu.com/api?v=3.0&&type=webgl&ak=VeNlX17jPLxeiO4BzoL5rb1nyULo4LA9"></script>
<script type="text/javascript">
	function G(id) {
		return document.getElementById(id);
	}

	// ------------------------------------  配置百度地图  --------------------------------------------------------------------------------
	var map = new BMapGL.Map("container"); // 创建地图实例
	var point = new BMapGL.Point(106.55734639, 29.61560503); // 创建点坐标 
	map.centerAndZoom(point, 18); // 初始化地图，设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
	map.setZoom(17)
	// 通过JavaScript的prototype属性继承于BMap.Control

	var hair = {};

	var input = document.getElementById("input");
	input.onfocus = function () {
		inputShow = 0
	}
	Object.defineProperty(hair, "attr", {
		configurable: true,
		enumerable: true,
		set: function (value) { //监听后台数据的改变
			attr = value;
			input.value = value; //将后台数据的值同步到输入框
		},
		get: function () {
			return attr;
		}
	});
	input.onkeyup = function (e) { //监听输入框内容的变化
		hair.attr = this.value; //将输入框的值同步到后台数据
	};
	var ac = new BMapGL.Autocomplete( //建立一个自动完成的对象
		{
			"input": "input",
			"location": map
		});
	ac.addEventListener("onhighlight", function (e) { //鼠标放在下拉列表上的事件
		var str = "";
		var _value = e.fromitem.value;
		var value = "";
		if (e.fromitem.index > -1) {
			value = _value.province + _value.city + _value.district + _value.street + _value.business;
		}
		str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

		value = "";
		if (e.toitem.index > -1) {
			_value = e.toitem.value;
			value = _value.province + _value.city + _value.district + _value.street + _value.business;
		}
		str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
		G("searchResultPanel").innerHTML = str;
	});

	var myValue;
	ac.addEventListener("onconfirm", function (e) { //鼠标点击下拉列表后的事件
		var _value = e.item.value;
		myValue = _value.province + _value.city + _value.district + _value.street + _value.business;
		G("searchResultPanel").innerHTML = "onconfirm<br />index = " + e.item.index +
			"<br />myValue = " + myValue;
		input.value = myValue;
		setPlace();
		searchByStationName()
	});

	function setPlace() {
		map.clearOverlays(); //清除地图上所有覆盖物
		function myFun() {
			var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
			map.centerAndZoom(pp, 30);
			map.addOverlay(new BMapGL.Marker(pp)); //添加标注
		}
		var local = new BMapGL.LocalSearch(map, { //智能搜索
			onSearchComplete: myFun
		});
		local.search(myValue);
	}


	var poiWeidu
	var localSearch = new BMapGL.LocalSearch(map);

	function searchByStationName() {
		var keyword = document.getElementById("input").value;
		localSearch.setSearchCompleteCallback(function (searchResult) {
			var poi = searchResult.getPoi(0);
			if (poi) {
				poiWeidu = {
					lng: poi.point.lng,
					lat: poi.point.lat
				}; //获取经度和纬度，将结果显示在文本框中
				let data = {
					address: input.value,
					lng: poiWeidu.lng,
					lat: poiWeidu.lat,
				}
				// console.log(data)  //获取的地址信息
				// console.log('132143223',data);
				localStorage.setItem('addressInfoItem', JSON.stringify(data))

			}
			map.centerAndZoom(poi.point, 15);
		});
		localSearch.search(keyword);
	}

	let geolocation = new BMapGL.Geolocation();
	geolocation.getCurrentPosition(function (r) {
		if (this.getStatus() == BMAP_STATUS_SUCCESS) {
			var mk = new BMapGL.Marker(r.point);
			map.addOverlay(mk);
			map.panTo(r.point);
		} else { }
	});

	var geoc = new BMapGL.Geocoder();
	map.addEventListener('click', function (e) {
		// 清除地图上所有的覆盖物
		map.clearOverlays();
		var pt = e.latlng;
		var marker = new BMapGL.Marker(new BMapGL.Point(pt.lng, pt.lat));
		map.addOverlay(marker);
		geoc.getLocation(pt, function (rs) {
			var addComp = rs.addressComponents;
			hair.attr = rs.address
		})
	})
</script>

</html>